<template>
  <view class="search-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input 
          type="text" 
          v-model="searchKey" 
          :placeholder="$t('common.search.placeholder')"
          @confirm="handleSearch"
          focus
        />
        <text class="clear" @tap="clearSearch" v-if="searchKey">×</text>
      </view>
      <text class="cancel" @tap="goBack">{{ $t('common.search.cancel') }}</text>
    </view>
    
    <!-- 搜索历史 -->
    <view class="history-section" v-if="!searchKey && searchHistory.length">
      <view class="section-header">
        <text class="title">{{ $t('common.search.history') }}</text>
        <text class="clear" @tap="clearHistory">{{ $t('common.search.clear') }}</text>
      </view>
      <view class="history-list">
        <view 
          class="history-item"
          v-for="(item, index) in searchHistory"
          :key="index"
          @tap="useHistory(item)"
        >
          <text class="iconfont icon-time"></text>
          <text class="text">{{ item }}</text>
          <text class="delete" @tap.stop="deleteHistory(index)">×</text>
        </view>
      </view>
    </view>
    
    <!-- 热门搜索 -->
    <view class="hot-section" v-if="!searchKey">
      <view class="section-title">{{ $t('common.search.hot') }}</view>
      <view class="hot-tags">
        <view 
          class="tag"
          v-for="(tag, index) in hotSearches"
          :key="index"
          @tap="useHotSearch(tag)"
          :class="{ hot: index < 3 }"
        >
          {{ tag }}
        </view>
      </view>
    </view>
    
    <!-- 搜索建议 -->
    <view class="suggest-list" v-if="searchKey && !showResults">
      <view 
        class="suggest-item"
        v-for="(item, index) in suggestions"
        :key="index"
        @tap="useSuggestion(item)"
      >
        <text class="iconfont icon-search"></text>
        <text class="text">{{ item }}</text>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <view class="result-container" v-if="showResults">
      <!-- 结果分类 -->
      <view class="result-tabs">
        <view 
          class="tab-item"
          v-for="(tab, index) in resultTabs"
          :key="index"
          :class="{ active: currentTab === tab.value }"
          @tap="switchTab(tab.value)"
        >
          <text class="label">{{ $t(`department.search.tabs.${tab.value}`) }}</text>
          <text class="count">({{ tab.count }})</text>
        </view>
      </view>
      
      <!-- 科室结果 -->
      <view class="department-list" v-if="currentTab === 'department'">
        <view 
          class="department-item card"
          v-for="(dept, index) in departmentResults"
          :key="index"
          @tap="navigateToDepartment(dept)"
        >
          <view class="header">
            <view class="hospital">
              <image :src="dept.hospitalLogo" mode="aspectFit" class="logo" />
              <text class="name">{{ dept.hospitalName }}</text>
            </view>
            <view class="dept-info">
              <image :src="dept.icon" mode="aspectFit" class="icon" />
              <view class="info">
                <text class="name">{{ dept.name }}</text>
                <text class="desc">{{ dept.description }}</text>
              </view>
            </view>
          </view>
          <view class="footer">
            <view class="stats">
              <text class="distance">{{ dept.distance }}km</text>
              <text class="rating">评分 {{ dept.rating }}</text>
              <text class="count">{{ dept.doctorCount }}位医生</text>
            </view>
            <button class="book-btn primary-btn">预约挂号</button>
          </view>
        </view>
      </view>
      
      <!-- 医生结果 -->
      <view class="doctor-list" v-if="currentTab === 'doctor'">
        <view 
          class="doctor-item card"
          v-for="(doctor, index) in doctorResults"
          :key="index"
          @tap="navigateToDoctor(doctor)"
        >
          <image :src="doctor.avatar" mode="aspectFill" class="avatar" />
          <view class="info">
            <view class="basic">
              <text class="name">{{ doctor.name }}</text>
              <text class="title">{{ doctor.title }}</text>
            </view>
            <text class="department">{{ doctor.department }}</text>
            <text class="specialty">{{ doctor.specialty }}</text>
            <view class="footer">
              <view class="rating">
                <text class="score">{{ doctor.rating }}分</text>
                <text class="count">{{ doctor.ratingCount }}评价</text>
              </view>
              <button class="book-btn primary-btn">预约</button>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 疾病结果 -->
      <view class="disease-list" v-if="currentTab === 'disease'">
        <view 
          class="disease-item card"
          v-for="(disease, index) in diseaseResults"
          :key="index"
          @tap="navigateToDisease(disease)"
        >
          <text class="name">{{ disease.name }}</text>
          <text class="desc">{{ disease.description }}</text>
          <view class="departments">
            <text class="label">就诊科室：</text>
            <text 
              class="dept"
              v-for="(dept, idx) in disease.departments"
              :key="idx"
            >{{ dept }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 搜索关键词
const searchKey = ref('')
const showResults = ref(false)

// 搜索历史
const searchHistory = ref([
  '心内科',
  '发烧',
  '骨科',
  '儿科'
])

// 热门搜索
const hotSearches = [
  '心内科',
  '儿科',
  '发烧',
  '骨科',
  '高血压',
  '糖尿病',
  '感冒',
  '头痛'
]

// 搜索建议
const suggestions = computed(() => {
  if (!searchKey.value) return []
  return [
    searchKey.value + '科',
    '儿童' + searchKey.value,
    searchKey.value + '专科',
    searchKey.value + '疾病'
  ]
})

// 结果分类
const resultTabs = [
  { value: 'department', count: 5 },
  { value: 'doctor', count: 8 },
  { value: 'disease', count: 3 }
]

const currentTab = ref('department')

// 搜索结果数据
const departmentResults = ref([
  {
    id: 1,
    name: '心内科',
    icon: '/static/department/cardiology.png',
    description: '心血管疾病诊治',
    rating: 4.9,
    doctorCount: 8,
    hospitalId: 1,
    hospitalName: '澳门镜湖医院',
    hospitalLogo: '/static/hospital/kiang-wu.jpg',
    distance: 2.5
  },
  {
    id: 2,
    name: '心内科',
    icon: '/static/department/cardiology.png',
    description: '心血管疾病诊治',
    rating: 4.8,
    doctorCount: 6,
    hospitalId: 2,
    hospitalName: '澳门科大医院',
    hospitalLogo: '/static/hospital/must.jpg',
    distance: 5.8
  }
])

const doctorResults = ref([
  {
    id: 1,
    name: '张医生',
    title: '主任医师',
    avatar: '/static/doctor/doctor1.jpg',
    department: '心内科',
    specialty: '冠心病、心律失常',
    rating: 4.9,
    ratingCount: 1280
  }
])

const diseaseResults = ref([
  {
    id: 1,
    name: '冠心病',
    description: '心脏冠状动脉血管发生动脉粥样硬化病变而引起的心脏病',
    departments: ['心内科', '心外科']
  }
])

// 清空搜索
const clearSearch = () => {
  searchKey.value = ''
  showResults.value = false
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 清空历史
const clearHistory = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = []
      }
    }
  })
}

// 删除单条历史
const deleteHistory = (index) => {
  searchHistory.value.splice(index, 1)
}

// 使用历史记录
const useHistory = (keyword) => {
  searchKey.value = keyword
  handleSearch()
}

// 使用热门搜索
const useHotSearch = (keyword) => {
  searchKey.value = keyword
  handleSearch()
}

// 使用搜索建议
const useSuggestion = (keyword) => {
  searchKey.value = keyword
  handleSearch()
}

// 执行搜索
const handleSearch = () => {
  if (!searchKey.value.trim()) return
  
  // 添加到搜索历史
  if (!searchHistory.value.includes(searchKey.value)) {
    searchHistory.value.unshift(searchKey.value)
    if (searchHistory.value.length > 10) {
      searchHistory.value.pop()
    }
  }
  
  showResults.value = true
  // 加载搜索结果
  loadSearchResults()
}

// 切换结果分类
const switchTab = (tab) => {
  currentTab.value = tab
}

// 加载搜索结果
const loadSearchResults = () => {
  // 加载搜索结果的逻辑
}

// 导航到科室详情
const navigateToDepartment = (dept) => {
  uni.navigateTo({
    url: `/pages/department/detail?id=${dept.id}&hospitalId=${dept.hospitalId}`
  })
}

// 导航到医生详情
const navigateToDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?doctorId=${doctor.id}`
  })
}

// 导航到疾病详情
const navigateToDisease = (disease) => {
  uni.navigateTo({
    url: `/pages/disease/detail?id=${disease.id}`
  })
}
</script>

<style lang="scss">
.search-container {
  min-height: 100vh;
  background: $bg-color;
  
  .search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: $shadow-sm;
    
    .search-box {
      flex: 1;
      display: flex;
      align-items: center;
      height: 72rpx;
      background: $bg-color;
      border-radius: $radius-xl;
      padding: 0 30rpx;
      margin-right: 20rpx;
      
      .icon-search {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 20rpx;
      }
      
      input {
        flex: 1;
        font-size: 28rpx;
        color: $text-primary;
      }
      
      .clear {
        font-size: 40rpx;
        color: $text-secondary;
        padding: 0 10rpx;
      }
    }
    
    .cancel {
      font-size: 28rpx;
      color: $text-regular;
      padding: 10rpx;
    }
  }
  
  .history-section {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .clear {
        font-size: 26rpx;
        color: $text-secondary;
        padding: 10rpx;
      }
    }
    
    .history-list {
      .history-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        
        .icon-time {
          font-size: 32rpx;
          color: $text-secondary;
          margin-right: 20rpx;
        }
        
        .text {
          flex: 1;
          font-size: 28rpx;
          color: $text-regular;
        }
        
        .delete {
          font-size: 40rpx;
          color: $text-secondary;
          padding: 0 10rpx;
        }
      }
    }
  }
  
  .hot-section {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    
    .section-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .hot-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      
      .tag {
        font-size: 26rpx;
        color: $text-regular;
        padding: 12rpx 24rpx;
        background: $bg-color;
        border-radius: $radius-xl;
        
        &.hot {
          color: #fff;
          background: $primary-gradient;
        }
      }
    }
  }
  
  .suggest-list {
    background: #fff;
    
    .suggest-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      
      .icon-search {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 20rpx;
      }
      
      .text {
        font-size: 28rpx;
        color: $text-regular;
      }
    }
  }
  
  .result-container {
    .result-tabs {
      display: flex;
      background: #fff;
      padding: 20rpx 0;
      margin-bottom: 20rpx;
      box-shadow: $shadow-sm;
      
      .tab-item {
        flex: 1;
        text-align: center;
        position: relative;
        
        &.active {
          .label {
            color: $primary-color;
            font-weight: bold;
          }
          
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -20rpx;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background: $primary-color;
            border-radius: 2rpx;
          }
        }
        
        .label {
          font-size: 28rpx;
          color: $text-regular;
        }
        
        .count {
          font-size: 24rpx;
          color: $text-secondary;
          margin-left: 4rpx;
        }
      }
    }
    
    .department-list, .doctor-list, .disease-list {
      padding: 20rpx;
    }
    
    .department-item {
      margin-bottom: 20rpx;
      
      .header {
        .hospital {
          display: flex;
          align-items: center;
          padding-bottom: 20rpx;
          margin-bottom: 20rpx;
          border-bottom: 1rpx solid #eee;
          
          .logo {
            width: 40rpx;
            height: 40rpx;
            border-radius: $radius-sm;
            margin-right: 12rpx;
          }
          
          .name {
            font-size: 26rpx;
            color: $text-regular;
          }
        }
        
        .dept-info {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          
          .icon {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
          }
          
          .info {
            flex: 1;
            
            .name {
              font-size: 32rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 8rpx;
              display: block;
            }
            
            .desc {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
        }
      }
      
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .stats {
          .distance {
            font-size: 26rpx;
            color: $primary-color;
            margin-right: 20rpx;
          }
          
          .rating {
            font-size: 26rpx;
            color: $warning;
            margin-right: 20rpx;
          }
          
          .count {
            font-size: 26rpx;
            color: $text-secondary;
          }
        }
        
        .book-btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 26rpx;
        }
      }
    }
    
    .doctor-item {
      display: flex;
      margin-bottom: 20rpx;
      padding: 20rpx;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .basic {
          margin-bottom: 8rpx;
          
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-right: 16rpx;
          }
          
          .title {
            font-size: 26rpx;
            color: $text-regular;
          }
        }
        
        .department {
          font-size: 26rpx;
          color: $primary-color;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .specialty {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .rating {
            .score {
              font-size: 26rpx;
              color: $warning;
              font-weight: bold;
              margin-right: 8rpx;
            }
            
            .count {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
          
          .book-btn {
            width: 120rpx;
            height: 56rpx;
            line-height: 56rpx;
            font-size: 26rpx;
          }
        }
      }
    }
    
    .disease-item {
      margin-bottom: 20rpx;
      padding: 20rpx;
      
      .name {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .desc {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .departments {
        .label {
          font-size: 26rpx;
          color: $text-secondary;
        }
        
        .dept {
          font-size: 26rpx;
          color: $primary-color;
          margin-right: 16rpx;
          
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style> 